<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>06CSS배경</title>
	</head>

	<body style="width: 550px;height: 350px;border:1px solid black;
		background-image: url('images/suji1.jpg');background-repeat: repeat; background-position: center center; background-attachment: fixed">
		<h1>CSS배경</h1>
		<h2>배경이미지 띄우기</h2>
		<div style="width: 550px;height: 350px;border:1px solid black;
		background-image: url('images/2.gif');background-repeat: no-repeat">진수</div>
		<h2>배경이미지 반복제어: backgroud-repeat</h2>
		<div style="width: 550px;height: 350px;border:1px solid black;
		background-image: url('images/3.gif');background-repeat: repeat-x">진수</div>
		<div style="width: 550px;height: 350px;border:1px solid black;
		background-image: url('images/4.gif');background-repeat: repeat-y">진수</div>
		<div style="width: 550px;height: 350px;border:1px solid black;
		background-image: url('images/6.gif');background-repeat: repeat">진수</div>
		
		<h2>배경이미지 위치지정: backgroud-position</h2>
		<div style="width: 550px;height: 350px;border:1px solid black;
		background-image: url('images/suji2.jpg');background-position: 100px 100px">진수</div>
		<div style="width: 550px;height: 350px;border:1px solid black;
		background-image: url('images/suji1.jpg');background-repeat: repeat-y; background-position: center center">진수</div>		
		
		<h2>배경이미지 고정하기:background-attachment</h2>
		
		<hr/>
		<h2>배경이미지 관령 속성 단축형으로 쓰기</h2>
		<p>background : 색상,이미지,반복여부,고정여부,위치</p>
		<div style="background: url('images/suji1.jpg') no-repeat center center; width: 750px;height: 450px; border: 1px solid navy; 
		  background-position: center 0px"> </div>
		
	</body>
</html>



